<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery.min.js"></script>
  <script>
    $(function () {
      console.log($('ul>li'))

      $('ul > li').click(function () {
        console.log('我被点了')
      })

      // 想为5个li分别设置不同的背景色
      $('ul > li').css('backgroundColor', 'blue')

      var arr = ['red', 'orange', 'yellow', 'green', 'blue']

      // ES5方法: forEach 数组的原生方法
      // arr.forEach(function(element, index) {
      //   console.log(element, index)
      // })

      // 遍历元素的方法
      // $('ul > li').each(function(index, element) {
      //   console.log(index, element)
      //   $(element).css('backgroundColor', arr[index])
      // })

      // 除了可以遍历元素, 还可以遍历其他任意对象  包括数组
      // $.each($('ul > li'), function(index, element) {
      //   console.log(index, element)
      //   $(element).css('backgroundColor', arr[index])
      // })

      // 简化for循环
      // for (var i = 0; i < arr.length; i++) {
      //   var element = arr[i]
      // }

      // $.each(arr, function(index, element) {

      // })

      // 可以遍历数据
      // $.each(arr, function (index, element) {
      //   console.log(index, element)
      // })

      // var o = {
      //   name: 'zs',
      //   age: 18
      // }

      // // key-value 键值对
      // $.each(o, function (index, element) {
      //   console.log(index, element)
      // })

        // 购物车模块1: 全选反选
        // 全选
        // 1. 点击全选按钮 --> change事件
        // 2. 希望下面复选框和全选按钮的状态同步
        // 2.1 获取全选按钮的状态
        // 2.2 设置给下面的所有复选框
        // 3. 另一个全选按钮状态也要同步

    })
  </script>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

</html>